<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="app">
    <!--插值表达式 {{ express }} mustance 小胡子语法-->
    <p>{{ title }}</p>
    <p>插值表达式里面可以做什么？</p>
    <p>2. 可以写 data 里面的属性数据。
</p>
    <hr>
    <p>{{ title }}</p>
    <p>{{ number1 }}</p>
    <p>{{ isBool }}</p>
    <p>{{ arr1 }}</p>
    <p>{{ obj }}</p>
    <hr>
    <h2>复合数据类型的处理-数组-单个值的获取</h2>
    <p>{{  arr1[0]  }}</p>
    <p>{{  arr1[1]  }}</p>
    <p>{{  arr1[2]  }}</p>
    <p>{{  arr1.length  }}</p>

    <hr>
     <h2>复合数据类型的处理-数组-遍历操作</h2>
     <p>v-for是 vuejs 提供的一个标签内部的属性，我们称之为 vujs指令。使用该指令可以进行数据的循环操作。</p>
     <p v-for="ele in arr1" >{{ ele }} </p>

     <hr>

      <p v-for="(ele, index) in arr1" > 下标：{{ index }}，元素的值： {{ ele }} </p>


    <hr>
     <h2>复合数据类型的处理-对象-单个值的获取</h2>
     <p>{{ obj.id  }}</p>
     <p>{{ obj.username  }}</p>
     <p>{{ obj.age  }}</p>

     <hr>
     <h2>复合数据类型的处理-对象-遍历操作</h2>
     <p v-for="val in obj">{{ val  }}</p>

     <hr>
      <p v-for="(val, attr) in obj">属性：{{ attr }}，属性值： {{ val  }}</p>
      <hr>
      <h2>对象数组的遍历</h2>
      <ul v-for="ele in objArr">
          <li>序号：{{ ele.id }}</li>
          <li>用户名：{{ ele.username }}</li>
          <li>年龄：{{ ele.age }}</li>
          </ul>
</div>

</body>

<script src="lib/vue.js"></script>

<script type="text/javascript">

    console.log(Vue);

    new Vue({
        el: '#app', // css选择器 代表 vuejs 管理的区域
        data: {
            title: 'hi vuejs!',
            number1: 12,
            isBool: false,
            /*对于复合数据类型 1. 单个值 2. 遍历*/
            arr1: [12, 23, 34],
            obj: {id:1, username: 'andy', age:23},
            objArr: [
                {id:1, username: 'andy', age:23},
                {id:2, username: 'mark', age:24},
                {id:3, username: 'lily', age:34},

            ]
        },
    });

</script>

</html>
